<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <p>在Vue2.x版本中，数组和对象的部分变异，不能被vue监听，导致页面不会自动刷新</p>
        <p>数组变异：1.根据下标修改一整项；2.直接修改数组长度</p>
        <hr>
        <button v-for="num in arr1" :key="num">{{num}}</button>
        <br>
        <div v-for="item in arr2" :key="item.name">{{item.name}}-{{item.age}}</div>
        <button @click="changeArr1">修改数组内容</button>
        <button @click="changeArr2">修改数组长度</button>
    </div>
    <script src="../0511/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                arr1: [1,2,3,4,5],
                arr2: [
                    {name: 'Tom', age: 18},
                    {name: 'Tony', age: 19},
                    {name: 'Tina', age: 19},
                    {name: 'Tini', age: 22},
                ],
            },
            methods: {
                changeArr1() {
                    // this.arr1[0] = 666;
                    // console.log(this.arr1);
                    // this.arr2[0] = {name: 'Timor', age: 3}// 错误的方法
                    // this.arr2.splice(0, 1, {name: 'Timor', age: 3}) // 正确的方法1，splice
                    this.$set(this.arr2, 0, {name: 'Timor', age: 6}) // 正确的方法2
                    // Vue.set(this.arr2, 0, {name: 'Timor', age: 6}) // 正确的方法2.5 别名
                    console.log(this.arr2);
                },
                changeArr2() {
                    // this.arr1.length = 2; // 错误的方法
                    this.arr1.splice(2) // 正确的方法
                    console.log(this.arr1);
                }
            }
        })
    </script>
</body>
</html>